<template>
    <div>
        <h2>子组件显示父组件信息  父传子(三代)</h2>
        <div>父元素的name:{{tfatherData.name}}</div>
        <div>父元素的age:{{tfatherData.age}}</div>
        <!--这里传过去会渲染三次connection2组件-->
        <Connection2 v-for="son in tfatherData.sons" :ttSon="son"></Connection2>
        <div v-for="mv in tmovie">{{mv}}</div>
        <el-button @click="tevent">子传父</el-button>
        <div v-for="h in son.hobby"  @click="tevent2(h)">{{h}}</div>
    </div>
</template>

<script>
  import Connection2 from "@/views/vue/component/communication/Connection2";
    export default {
        name: "Connection1",
        components:{
          Connection2
        },
        props:{
          tfatherData:{
            type:Object
          },
          tmovie:{
            type:Array,
            /*default: () => {
              return ['mv1', 'mv2', 'mv3', 'mv4']
            }*/
          }
        },
        data(){
            return{
                son:{
                  name:'er',
                  age:5,
                  phone:'15056103333',
                  wealth:10000,
                  hobby:['A','BB','CCC'],
                },
                sonData:'sonData',
                hobby:['A','BB','CCC'],
            }
        },
      methods:{
        tevent(){
          this.$emit('t',this.sonData)
        },
        tevent2(item){
          this.$emit('t2',item)
        },
        zimethods(){
          console.log("我是子组件的方法 我被调用了")
          console.log("this.$parent子组件访问父组件数据并调用其方法")
          console.log(this.$parent.fatherData)
          this.$parent.famethods()
          console.log(this.$children)
          //this.$children注意获取的是第几个孩子
          console.log(this.$children[0].ziziData,this.$children[1].ziziData,this.$children[2].ziziData)
          this.$children[0].zizimethods()
        }
      }
    }
</script>

<style scoped>

</style>
